import React, { useState, useEffect } from 'react'
import { Breadcrumb, Button, Modal } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';



export default function Echarts11() {
    const category = ['8:20', '8:30', '8:40', '8:50', '9:00', '9:10', '9:20', '9:30', '9:40', '9:50', '10:10', '10:20']
    // var dottedBase = []
    const lineData = [5, 3, 7, 12, 19, 15, 2, 1,
        6, 8, 20, 7]
    const lineData1 = [5, 3, 7, 12, 19, 15, 2, 1,
        6, 8, 20, 7]
    const lineData2 = [1, 2, 5, 10, 0, 15, 12, 10,
        16, 18, 2, 19]

    const barData = ['1000000', '1000', '132432', '30000', '1200000', '10000', '234', '12334', '333', '12', '2344', '2323']
    const barData1 = ['34244', '332', '234445', '232434', '32434', '1344','31334']
    const barData2 = ['326666','4545','4343','0','10000','5643','3232333','3333','0']
    const [echarts11, setMain] = useState('')
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['放款金额', '贷款人数', '放款人数', '贷款转化率(%)', '放款转化率(%)', '平均贷款转化率(%)']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: '#828282'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#828282'
                }
            },
            splitLine: { show: false },
            axisLabel: {
                color: '#828282'
            },
            boundaryGap: false
        },
        yAxis: [{
            nameTextStyle: {
                color: '#828282'
            },
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#828282'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#828282'
                }
            },
            axisLabel: {
                formatter: '{value} ',
                color: '#828282'
            }
        },
        {
            name: '转化率(%)',
            nameTextStyle: {
                color: '#828282'
            },
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#828282'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#828282'
                }
            },
            axisLabel: {
                formatter: '{value} ',
                color: '#828282'
            }
        }],


        series: [
            {
                name: '放款金额',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#fded33',
                        lineStyle: {
                            color: '#fded33',
                            width: 1
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(253,237,51,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(253,237,51,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(253,237,51,0.6)'
                            }])
                        }
                    }
                },
                data: barData
            },


            {
                name: '贷款人数',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#ffba7e',
                        lineStyle: {
                            color: '#ffba7e',
                            width: 1
                        },
                        areaStyle: {
                            // color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(255,186,126,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,186,126,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,186,126,0.6)'
                            }])
                        }
                    }
                },
                data: barData1
            },

            {
                name: '放款人数',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#cc0003',
                        lineStyle: {
                            color: '#cc0003',
                            width: 1
                        },
                        areaStyle: {
                            // color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(204,0,51,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(204,0,51,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(204,0,51,0.6)'
                            }])
                        }
                    }
                },
                data: barData2
            },
            {
                name: '贷款转化率(%)',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#ff90a8',
                        lineStyle: {
                            color: '#ff90a8',
                            width: 1
                        },
                        areaStyle: {
                            // color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(255,144,168,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,144,168,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,144,168,0.6)'
                            }])
                        }
                    }
                },
                data: lineData
            },
            {
                name: '放款转化率(%)',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#cccccc',
                        lineStyle: {
                            color: '#cccccc',
                            width: 1
                        },
                        areaStyle: {
                            // color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(204,204,204,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(204,204,204,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(204,204,204,0.6)'
                            }])
                        }
                    }
                },
                data: lineData1
            },
            {
                name: '平均贷款转化率(%)',
                type: 'line',
                smooth: true, // 平滑曲线
                showAllSymbol: true,
                // symbol: 'emptyCircle',
                // symbol: 'circle',
                symbolSize: 5,
                showSymbol: true,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#CC99FF',
                        lineStyle: {
                            color: '#CC99FF',
                            width: 1
                        },
                        areaStyle: {
                            // color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(255,153,204,0)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,153,204,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,153,204,0.6)'
                            }])
                        }
                    }
                },
                data: lineData2
            }
        ]
    };
    useEffect(() => {
        var node = document.getElementById('echarts11')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echarts11 !== "") {
        var myChart = echarts.init(echarts11);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }
    return (
        <div>

            <div id="echarts11"></div>

        </div>
    )
}
